<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Button type="primary" @click="handleAllocation" class="ivu-mb-16">新增</Button>
            <Table :columns="columns" :data="data">
                <template slot-scope="{ row }" slot="status">
                    <Button v-if="row.status ==='1'" type="success" size="small">启用</Button>
                    <Button v-if="row.status ==='0'" type="error" size="small">停用</Button>
                </template>
                <template slot-scope="{ row }" slot="operation">
                    <a @click="handleAllocation">编辑</a>
                    <Divider type="vertical" />
                    <a>删除</a>
                </template>
            </Table>
        </Card>
        <Modal v-model="modal" title="新增" @on-ok="handleSubmit1" @on-cancel="handleDrawerCancel">
            <Form rel="formItem" :model="formItem" :label-width="118">
                <FormItem label="标签组名称" required>
                    <Input v-model="formItem.input" placeholder="请输入"></Input>
                </FormItem>
                <FormItem
                    v-for="(item, index) in formItem.items"
                    v-if="item.status"
                    :key="index"
                    :label="'标签 ' + item.index"
                    :prop="'items.' + index + '.value'"
                    :rules="{required: true, message: '标签 ' + item.index +' 请录入内容', trigger: 'blur'}"
                >
                    <Row>
                        <Col span="18">
                            <Input
                                type="text"
                                v-model="item.value"
                                placeholder="Enter something..."
                            ></Input>
                        </Col>
                        <Col span="4" offset="1">
                            <Button @click="handleRemove(index)">删除</Button>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem>
                    <Row>
                        <Col span="12">
                            <Button type="dashed" long @click="handleAdd" icon="md-add">新增标签</Button>
                        </Col>
                    </Row>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: 'diagnosis',
        data () {
            return {
                index: 1,
                modal: false,
                formItem: {
                    input: '',
                    switch: true,
                    items: [
                        {
                            value: '',
                            index: 1,
                            status: 1
                        }
                    ]
                },
                columns: [
                    {
                        title: '标签组',
                        key: 'labelGroup'
                    },
                    {
                        title: '子标签',
                        key: 'label'
                    },
                    {
                        title: '操作',
                        slot: 'operation'
                    }
                ],
                data: [
                    {
                        labelGroup: '营销',
                        label: '活动/专家/康复发'
                    },
                    {
                        labelGroup: '活动',
                        label: '活动/专家'
                    }
                ]
            }
        },
        methods: {
            handleAllocation () {
                this.modal = true;
            },
            handleDrawerCancel () {
                this.$Message.warning('已取消!');
            },
            handleSubmit1 () {
                this.$Message.success('操作成功!');
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            handleAdd () {
                this.index++;
                this.formItem.items.push({
                    value: '',
                    index: this.index,
                    status: 1
                });
            },
            handleRemove (index) {
                this.formItem.items[index].status = 0;
            }
        }
    }
</script>
